<template>
  <div>
    <div class="header">
      <h1>&lt;&nbsp;结婚/摄影</h1>
      <input type="text" placeholder="搜索商户名/服务项目" />
      <img src="img/my.jpg" />
    </div>
    <div class="nav">
      <ul class="nav-1">
        <router-link to="/weddingmin/wedding1">
          <li>
            <img src="img/tubiao1.jpg" />

            <span>婚纱摄影</span>
          </li>
        </router-link>
        <router-link to="/weddingmin/wedding2.vue">
          <li>
            <img src="img/tubiao2.jpg" />

            <span>全球旅拍</span>
          </li>
        </router-link>
        <router-link to="/weddingmin/wedding3.vue">
          <li>
            <img src="img/tubiao3.jpg" />

            <span>婚宴</span>
          </li>
        </router-link>
        <router-link to="/weddingmin/wedding4.vue">
          <li>
            <img src="img/tubiao4.jpg" />

            <span>婚礼策划</span>
          </li>
        </router-link>
        <router-link to="/weddingmin/wedding5.vue">
          <li>
            <img src="img/tubiao5.jpg" />

            <span>婚纱礼服</span>
          </li>
        </router-link>

       
      </ul>
      <ul class="nav-2">
        <li v-for="(a, j) in arr1" :key="j">
          <img :src="a.img" />
          <span>{{ a.name }}</span>
        </li>
      </ul>
      <ul class="nav-3">
        <li>
          <h1>&nbsp;婚礼大咖</h1>
          <span>&nbsp;业内高手</span>
          <img src="img/chatu1.jpg" alt="" />
        </li>
        <li>
          <h1>结婚工具</h1>
          <span>电子请柬</span>
          <img src="img/chatu2.jpg" alt="" />
        </li>
      </ul>
      <div class="img">
        <img src="img/biggug.jpg" />
      </div>
    </div>
    <div class="main">
      <ul>
        <li v-for="(b, c) in arr2" :key="c" @click="fun($event)">
          <a href="">{{ b.name }}</a>
        </li>
      </ul>
    </div>
    <div class="box">
      <ul class="left">
        <li v-for="(d, h) in arr3" :key="h" class="div-1">
          <img :src="d.img" />
          <h1>{{ d.Name }}</h1>
          <p>
            {{ d.Salesvol }}<del>{{ d.Underline }}</del
            ><i>{{ d.Full }}</i>
          </p>
          <h3>{{ d.Shopname }}</h3>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr1: [
        { img: "img/xiaobiao1.jpg", name: "个性写真" },
        { img: "img/xiaobiao2.jpg", name: "婚戒首饰" },
        { img: "img/xiaobiao3.jpg", name: "西服定制" },
        { img: "img/xiaobiao4.jpg", name: "婚房装修" },
        { img: "img/xiaobiao5.jpg", name: "展开更多" },
      ],
      arr2: [
        { name: "精选" },
        { name: "婚纱照" },
        { name: "写真" },
        { name: "婚纱礼服" },
        { name: "婚庆" },
        { name: "旅拍" },
        { name: "婚宴" },
        { name: "西服定制" },
        { name: "婚戒首饰" },
      ],
      arr3: [
        {
          img: "img/hunsha.jpg",
          Name: "大促4500元 十年技术口碑婚纱摄影店",
          Salesvol: "￥4500",
          Underline: "￥7699",
          Full: "减300",
          Shopname: "封面贵族婚纱摄影",
        },
        {
          img: "img/hunsha.jpg",
          Name: "大促4500元 十年技术口碑婚纱摄影店",
          Salesvol: "￥4500",
          Underline: "￥7699",
          Full: "减300",
          Shopname: "封面贵族婚纱摄影",
        },
        {
          img: "img/hunsha.jpg",
          Name: "大促4500元 十年技术口碑婚纱摄影店",
          Salesvol: "￥4500",
          Underline: "￥7699",
          Full: "减300",
          Shopname: "封面贵族婚纱摄影",
        },
        {
          img: "img/hunsha.jpg",
          Name: "大促4500元 十年技术口碑婚纱摄影店",
          Salesvol: "￥4500",
          Underline: "￥7699",
          Full: "减300",
          Shopname: "封面贵族婚纱摄影",
        },
      ],
    };
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 0.54rem;
  display: flex;
  justify-content: space-around;
}
.header > h1 {
  font-size: 0.17rem;
  line-height: 0.54rem;
  padding-left: 0.1rem;
}

.header > input {
  width: 1.74rem;
  height: 0.24rem;
  background-color: #f5f5f5;
  border-radius: 0.2rem;
  border: #f5f5f5;
  padding-left: 0.3rem;
  margin-top: 0.17rem;
}
.header > img {
  width: 0.24rem;
  height: 0.24rem;
  margin-top: 0.17rem;
}
.nav-1 {
  width: 100%;
  height: 0.91rem;
  display: flex;
  justify-content: space-around;
}
.nav-2 {
  width: 100%;
  height: 0.61rem;
  display: flex;
  justify-content: space-around;
}
.nav-1   li,
.nav-2 > li {
  width: 0.5rem;
}
.nav-1   li > img {
  width: 0.5rem;
  height: 0.5rem;
}
.nav-1   li > span,
.nav-2 > li > span {
  font-size: 0.1rem;
  display: block;
  width: 0.5rem;
  text-align: center;
  color: black;
}

.nav-2 > li > img {
  width: 0.25rem;
  height: 0.25rem;
  margin-left: 0.12rem;
}
.nav-3 {
  width: 100%;
  height: 0.54rem;
  display: flex;
  justify-content: space-around;
}
.nav-3 > li {
  width: 1.7rem;
  height: 0.54rem;
  border: 0.02rem #dfdfdf solid;
  border-radius: 0.1rem;
  position: relative;
}
.nav-3 > li > h1 {
  font-size: 0.14rem;
  font-weight: 900;
  margin-left: 0.07rem;
}
.nav-3 > li > span {
  font-size: 0.08rem;
  margin-left: 0.07rem;
}
.nav-3 > li > img {
  width: 0.28rem;
  height: 0.28rem;
  position: absolute;
  bottom: 0;
  right: 0.1rem;
}
.img {
  width: 95%;
  height: 0.72rem;
  padding: 0 0.1rem;
  margin-top: 0.1rem;
}
.img > img {
  width: 100%;
  height: 100%;
}
.main > ul {
  width: 100%;
  height: 0.45rem;
  line-height: 0.45rem;
  text-align: center;
  overflow-x: auto;
  display: flex;
  justify-content: start;
}
.main > ul > li {
  padding: 0 0.1rem;
  flex-shrink: 0;
  font-weight: 700;
}
.main > ul > li > a {
  color: black;
}
.left {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.div-1 {
  margin-top: 0.1rem;
}
.div-1 > img {
  width: 1.76rem;
  height: 1.76rem;
}
.div-1 > h1 {
  width: 1.76rem;
  font-size: 0.13rem;
}
.div-1 > p {
  color: #f97799;
  font-weight: 800;
  padding: 0.05rem 0;
}
.div-1 > p > del {
  color: #949494;
  font-size: 0.1rem;
  font-weight: normal;
}
.div-1 > p > i {
  color: #f97799;
  font-size: 0.1rem;
  font-weight: normal;
  border: 1px #f97799 solid;
}
.router-link-active {
  border-bottom: 1px #f97799 solid;
  font-size: 0.16rem;
}
</style>